<template>
  <common-echarts :option="option" :height="600" ref="echarts"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "GraphEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "生活圈关系图",
          type: "graph",
          layout: "force", // 力导向图的布局s
          symbolSize: 50, // 节点大小
          //   focusNodeAdjacency: true, // 鼠标悬停时，会隐藏与当前节点非直接连接的节点
          // 节点类别
          categories: [
            {
              name: "男",
              itemStyle: {
                normal: {
                  color: "#009800",
                },
              },
            },
            {
              name: "女",
              itemStyle: {
                normal: { color: "#4592ff" },
              },
            },
          ],
          // 节点名称
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 20, // 节点名称显示大小
              },
            },
          },
          force: {
            repulsion: 1000, //节点之间的排斥力
          },
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 10,
              },
              formatter: "{c}",
            },
          },
          data: [
            { name: "A", draggable: true, category: 0 },
            { name: "B", draggable: true, category: 1 },
            { name: "C", draggable: true, category: 0 },
            { name: "D", draggable: true, category: 1 },
            { name: "E", draggable: true, category: 0 },
            { name: "F", draggable: true, category: 1 },
            { name: "G", draggable: true, category: 1 },
            { name: "H", draggable: true, category: 1 },
          ],
          // 输入和输出的value之和不需要完全相等
          links: [
            { source: 0, target: 1, value: "夫妻" },
            { source: 0, target: 3, value: "父子" },
            { source: 0, target: 5, value: "朋友" },
            { source: 4, target: 5, value: "同事" },
            { source: 2, target: 7, value: "夫妻" },
            { source: 1, target: 7, value: "朋友" },
            { source: 1, target: 4, value: "朋友" },
            { source: 1, target: 6, value: "朋友" },
          ],
          lineStyle: {
            // 关系连接线样式设置
            normal: {
              opacity: 0.9, // 不透明度
              width: 3,
              curveness: 0, // 关系连接线弯曲程度
            },
          },
        },
      ];

      return {
        title: {
          text: "人物关系图",
          subtext: "关系图",
          left: "center",
        },
        legend: {
          x: "center",
          top: "20%",
          data: ["男", "女"],
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
